<template>
  <div :id="id" class="Echarts"></div>
</template>

<script>
export default {
  props: ['id', 'kg_data'],
  mounted() {
    this.initChart()
  },
  watch: {
    kg_data: {
      handler(kg_data) {
        this.initChart()
      }
    },
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      const { categories, nodes, links } = this.kg_data
      this.chart.setOption({
        title: { textStyle: { fontWeight: "lighter" } },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        legend: { x: "center", show: true },
        series: [{
          type: 'graph', layout: 'force', symbolSize: 50, edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 4],
          edgeLabel: { normal: { show: true, textStyle: { fontSize: 10 }, formatter: "{c}" } },
          force: { repulsion: 2500, edgeLength: [10, 100] },
          focusNodeAdjacency: true, draggable: true, roam: true,
          label: { normal: { show: true, textStyle: { fontSize: 10 } } },
          force: { repulsion: 1000 },
          tooltip: {
            formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
              if (!node.value) return node.data.name
              else return node.data.name + ":" + node.data.showNum
            },
          },
          lineStyle: { normal: { opacity: 0.9, width: 1, curveness: 0.3 } },
          categories: categories, nodes: nodes, links: links,
        }]
      })
    }
  }
}
</script>

<style lang="scss">
.Echarts {
  width: 100%;
  height: 100%;
}
</style>
